<template>
  <div class="left-container">
    <!-- 方法1:使用全局计算属性里面的方法 -->
    <!-- <h3>left 组件 是否全选：{{ $store.getters.isAll }}</h3> -->
    <h3>Left 组件{{ isAll }}</h3>
    <hr />

    <!-- 方法1获取Store里的数据 -->
    <!-- <p>count 值：{{ $store.state.count }}</p> -->
    <p>count 值：{{ count }}</p>
    <!-- 方法1修改state里的数据 -->
    <!-- <button @click="$store.commit('add', { num: 1 })" class="btn btn-primary"> -->
    <!-- 方法2修改state里的数据 -->
    <button @click="add({ num: 1 })" class="btn btn-primary">+1</button>
    <!-- 方法1异步操作state里面的数据 -->
    <!-- <button @click="$store.dispatch('addBtn')" class="btn btn-danger">+1</button> -->
    <button @click="addBtn" class="btn btn-danger">+1</button>
  </div>
</template>

<script>
// 方法二获取store里的数据
// 按需导入mapSate映射函数
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Left",
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["isAll"]),
  },
  methods: {
    ...mapMutations(["add"]),
    ...mapActions(["addBtn"]),
  },
};
</script>

<style>
</style>
